<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
  <title>众茶国际</title>

  <script src="../vueJS/vue.js"></script>  
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../ElementUI/index.css">
  <!-- 引入组件库 -->
  <script src="../ElementUI/index.js"></script>
</head>
<body>
  <div id="app">
    <!-- <el-button @click="window.print()">打印订单</el-button> -->

    <div v-if="type == 1">
      <div class="title">货品明细</div>
      <div style="margin-top: 10px; font-size: 15px;">邮寄信息：{{ receiveMessage }}</div>
      <table border="1" cellspacing="0" style="margin-top: 10px;width: 100%; font-size: 15px;" align="center">
        <tr>
            <td style="width: 30px" align="center" valign="middle">序号</td>
            <td style="width: 60px; " align="center" valign="middle">订单号</td>
            <td style="width: 200px" align="center" valign="middle">商品名称</td>
            <td style="width: 100px" align="center" valign="middle">规格名称</td>
            <td style="width: 50px" align="center" valign="middle">数量</td>
            <td align="center" valign="middle">备注</td>
        </tr>
        <tr v-for="(item,index) in detailList" :key="item.id">
          <td style="width: 30px" align="center" valign="middle">{{ index + 1 }}</td>
          <td style="width: 60px; word-break: break-all; font-size: 10px;" align="center" valign="middle">{{ item.identifier }}</td>
          <td style="width: 200px" align="center" valign="middle">{{ item.name }}</td>
          <td style="width: 100px" align="center" valign="middle">{{ item.productSkuName }}</td>
          <td style="width: 50px" align="center" valign="middle">{{ item.num }}</td>
          <td align="center" valign="middle">{{ item.remark }}</td>
        </tr>
        <tr>
          <td colspan="6"><div style="float: right;">总数：{{ detailList.length }}件</div></td>
        </tr>
      </table>
      <div style="margin-top: 10px; display: flex; justify-content: space-between;">
        <div>下单时间：{{ firstOrder.createTime }}</div>
        <div>支付时间：{{ firstOrder.payTime }}</div>
      </div>
      <div style="margin-top: 20px; display: flex;">
        <div style="flex: 1;">经办人：</div>
        <div style="flex: 1;">核对人：</div>
      </div>
    </div>
    <div v-else>
      <iframe id="mapPage" :src="dbExpressUrl" width="100%" height="500px" frameborder=0>
      </iframe>
    </div>    

    
  </div>
</body>

<script type="text/javascript">
  new Vue({
    el:'#app',
    data:{
      list: [],
      detailList:[],
      firstOrder: {},
      receiveMessage: "",
      type: 1,//1: 打印订单 2：打印快递单
      dbExpressUrl: ''
    },
    computed: {},
    watch: {},
    methods: {
      updateUI() {
        if (this.firstOrder.logicId == 0) {
          this.receiveMessage = "自提" + " " + this.firstOrder.caigouName + " " + this.firstOrder.caigouMobile
        } else {
          this.receiveMessage = this.firstOrder.receiveName + " " 
          + this.firstOrder.receiveMobile + " " 
          + this.firstOrder.receiveProvinceName 
          + this.firstOrder.receiveCityName
          + this.firstOrder.receiveDistrictName 
          + this.firstOrder.receiveAddress 
        }

        for (let index = 0; index < this.list.length; index++) {
          var element = this.list[index];
          for (let j = 0; j < element.detailList.length; j++) {
            var good = element.detailList[j]
            good.identifier = element.identifier
            this.detailList.push(good)
          }
        }
        this.$forceUpdate();
      },
      GetUrlParam(name) {
        // 用该属性获取页面 URL 地址从问号 (?) 开始的 URL（查询部分）
        var url = window.location.search;
        // 正则筛选地址栏
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        // 匹配目标参数
        var result = url.substr(1).match(reg);
        //返回参数值
        return result ? decodeURIComponent(result[2]) : null;
      },
    },
    created() {
      
    },
    mounted() {
      window.parent.postMessage({status: 'isReady'}, '*')

      var dbExpressUrl = this.GetUrlParam("expressUrl");
      if (dbExpressUrl) {
        this.type = 2
        this.dbExpressUrl = dbExpressUrl
      } else {
        this.type = 1
      }

      window.addEventListener('message', messageEvent=> {
        if(messageEvent.source!=window.parent.window.parent) return;
          
        if (messageEvent.data && messageEvent.data.option) {
          if (messageEvent.data.option == 'doPrint') {
            window.print()
          }
        } else if (messageEvent.data && messageEvent.data.type) {
          if (messageEvent.data.type == 31) {
            this.list = messageEvent.data.data
            this.firstOrder = this.list[0]
          }

          this.updateUI()
        }
      })
    },
  })
</script>

<style lang='scss' scoped>
  .title {
    text-align: center;
    font-size: 20px;
  }

  .row {
    border: 1px solid black;
  }
</style>
</html>